<template>
  <div class="modal">
    <el-dialog v-model="dialogVisible" title="新建用户" width="30%">
      <el-form :model="formRef" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="formRef.name" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="formRef.realname" />
        </el-form-item>
        <el-form-item label="密码" v-if="isNewRef">
          <el-input v-model="formRef.password" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formRef.cellphone" />
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="formRef.roleId" placeholder="请选择角色">
            <el-option
              v-for="roleItem in roleList"
              :key="roleItem.id"
              :label="roleItem.intro"
              :value="roleItem.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择部门">
          <el-select v-model="formRef.departmentId" placeholder="请选择部门">
            <el-option
              v-for="departmenItem in departmentList"
              :key="departmenItem.id"
              :label="departmenItem.name"
              :value="departmenItem.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="affirmClick"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useMainStore from '@/store/modules/main'
import useSystemStore from '@/store/modules/system'
import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia'
const formRef = reactive<any>({
  realname: '',
  name: '',
  cellphone: '',
  password: '',
  departmentId: '',
  roleId: ''
})
const isNewRef = ref(true)
const editData = ref()
const mainStore = useMainStore()
const systemStore = useSystemStore()
const { roleList, departmentList } = storeToRefs(mainStore)
const dialogVisible = ref(false)
// 点击编辑的操作
function setDialogModal(isNew: boolean = true, userInfo?: any) {
  dialogVisible.value = true
  if (!isNew && userInfo) {
    isNewRef.value = false
    for (const key in formRef) {
      formRef[key] = userInfo[key]
    }
    editData.value = userInfo
  } else {
    for (const key in formRef) {
      formRef[key] = ''
    }
    editData.value = null
  }
}
// 点击确认的操作
function affirmClick() {
  dialogVisible.value = false
  if (isNewRef.value) {
    console.log(22)
    // 创建用户
    systemStore.foundUserInfo(formRef)
  } else {
    //编辑用户
    systemStore.editUsersInfo(editData.value.id, formRef)
  }
}

// 创建用户
// function foundUserInfo() {
//   if (!isNew && formData) {
//     console.log(formData)

//     // systemStore.editUsersInfo()
//   }

//   dialogVisible.value = false
// }
// 暴露给出去方法给外部调用
defineExpose({
  setDialogModal
})
</script>

<style lang="less" scoped>
.modal {
  :deep(.el-dialog__header) {
    text-align: center;
  }
  :deep(.el-dialog__body) {
    padding-right: 30px;
  }
  :deep(.el-dialog__footer) {
    text-align: center;
  }
  :deep(.el-select) {
    width: 100%;
  }
}
</style>
